<template>
  <section class="file-list">
    <section class="file-list-item" v-for="(item, index) in value" :key="item">
      <img v-if="getSuffix(item) !== '.pdf'" :src="item" alt="" @click="preview(item)" class="img br5 object-cover mr-8 mb-8 ss-img cursor-pointer">
      <section style="height: 100%;" class="flex flex-col items-center justify-center cursor-pointer" v-else @click="previewPdf(item)">
        <a-icon type="file-pdf" style="margin-top: 6px; font-size: 36px; color: rgba(255,0,0,0.75)"/>
        <section style="font-size: 12px; margin-top: 4px; color: #666">PDF</section>
      </section>
      <section @click.stop="delFile(index)" v-if="!isPreview" class="close">
        <a-icon theme="filled" type="close-circle" />
      </section>
    </section>
	
    <Upload
      v-if="showUpload"
      style="display: block;"
      :scene="scene"
      :file-types="fileTypes"
      :file-size="fileSize"
      @uploadSuccess="data => $emit('uploadSuccess', data)"
    >
      <div class="file-list-item ant-upload ant-upload-select ant-upload-select-picture-card">
        <div role="button" tabindex="0" class="ant-upload">
          <a-icon type="plus"/>
          <div class="ant-upload-text">上传</div>
        </div>
      </div>
    </Upload>
    <a-modal
      width="1200px"
      v-model="pdfPreview"
      :footer="null"
      :dialog-style="{top: '30px'}"
    >
      <iframe v-if="pdfPreview" style="margin-top: 20px; display: block; width: 100%; height: calc(100vh - 120px);" :src="previewImage" frameborder="0"></iframe>
<!--      <section style="overflow: auto; max-height: calc(100vh - 120px)">-->
<!--        <img alt="图片" style="width: 100%" :src="previewImage" @mouse/>-->
<!--      </section>-->
    </a-modal>
    <ImagePreview
      :visible.sync="previewVisible"
      :images="value.filter(e => getSuffix(e) !== '.pdf')"
      width="800px"
      height="calc(100vh - 120px)"
      layout="prev,next,zoomIn,zoomOut,rotate"
      :default-image="previewImage"
    />
  </section>
</template>
<script>
import ImagePreview from './ImagePreview'
function getSuffix(filename) {
  const pos = filename.lastIndexOf('.')
  let suffix = ''
  if (pos !== -1) {
    suffix = filename.substring(pos)
  }
  return suffix
}
export default {
  name: 'PreviewImage',
  components: {ImagePreview},
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    scene: {
      type: Number,
      default: undefined
    },
    isOpen: {
      type: Boolean,
      default: false
    },
    value: {
      type: Array,
      default: () => []
    },
    fileTypes: {
      type: Array,
      default: () => ['png', 'jpeg', 'jpg']
    },
    fileSize: {
      type: Number,
      default: 3
    },
    isPreview: {
      type: Boolean,
      default: true
    },
    showUpload: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isUpload: false,
      timer: null,
      seconds: 0,
      bucketDomain: '',
      filePath: '',
      ossClient: null,
      fileList: [],
      previewVisible: false,
      pdfPreview: false,
      previewImage: ''
    }
  },
  methods: {
    getSuffix,
    preview(url) {
      this.previewImage = url
      if (this.isOpen) return window.open(url)
      this.previewVisible = true
    },
    previewPdf(url) {
      this.previewImage = url
      this.pdfPreview = true
    },
    handleCancel() {
      this.previewVisible = false
    },
    delFile(index) {
      this.value.splice(index, 1)
      this.$emit('change', this.value)
    }
  }
}
</script>
<style lang="less" scoped>
  .file-list {
    display: flex;
    flex-wrap: wrap;
  }
  .file-list-item {
    position: relative;
    margin-right: 8px;
    margin-bottom: 8px;
    width: 88px!important;
    height: 88px!important;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    .close {
      line-height: 1;
      position: absolute;
      right: -5px;
      top: -5px;
      font-size: 18px;
      width: 18px;
      height: 18px;
      color: #f5222d;
      border-radius: 50%;
      overflow: hidden;
      background: #fff;
    }
    .img {
      width: 100%;
      height: 100%;
    }
  }
</style>
